import React from "react";
import "./index.scss";
import { useState, useEffect } from 'react';
import { Button, Form, Input, Space, Table, Tag, Radio, Drawer, Select,Breadcrumb} from "antd";
import { SearchOutlined, CaretDownOutlined,CloseOutlined, DoubleLeftOutlined } from "@ant-design/icons";
import type { ColumnsType, } from "antd/es/table";
import type { DrawerProps } from "antd";
import {get} from '../../../apis/orderApi'


const Order = () => {
   //请求数据
  useEffect(()=>{
    getUser();
  },[])
  const getUser = () =>{
    get().then((res:{[propName:string]:any}) => {
      let _data = res.data.map((v:{id:number}) =>{
        return {...v,key:v.id}
      })
      setData(_data);
    })
  }
  //搜索
  const onSearch = () => {
    console.log(111);
  };
  //重置
  const showDrawer = () => {
    console.log(222);
  };
  //高级筛选
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<DrawerProps["placement"]>("top");
  const senior = () => {
    console.log(333);
    setOpen(true);
  };
  const style = {
    // padding:'0 30px'
  };
  const onClose = () => {
    setOpen(false);
  };
  const iStyle = {
    color: "#d6d6d6",
  };

  //表格
  interface DataType {
    key: string;
    time: string;
    order: number;
    item: string;
    amount: string;
    name: string;
    phone: number;
    status: string;
    payment: number;
  }
  const columns: ColumnsType<DataType> = [
    {
      title: "订单创建时间",
      dataIndex: "o_date",
      key: "o_date",
      //   render: (text) => <a>{text}</a>,
    },
    {
      title: "订单号",
      dataIndex: "o_num",
      key: "o_num",
    },
    {
      title: "订单项目",
      dataIndex: "o_project",
      key: "o_project",
    },
    {
      title: "订单金额",
      key: "o_money",
      dataIndex: "o_money",
    },
    {
      title: "提交人",
      key: "o_name",
      dataIndex: "o_name",
    },
    {
      title: "提交人手机号",
      key: "o_phone",
      dataIndex: "o_phone",
    },
    {
      title: "订单状态",
      key: "o_state",
      dataIndex: "o_state",
    },
    {
      title: "支付流水号",
      key: "o_paynum",
      dataIndex: "o_paynum",
    },
  ];
  //数据
const [data,setData] = useState([])


  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(
        `selectedRowKeys: ${selectedRowKeys}`,
        "selectedRows: ",
        selectedRows
      );
    },
    getCheckboxProps: (record: DataType) => ({
      disabled: record.name === "Disabled User", // Column configuration not to be checked
      name: record.name,
    }),
  };
  //分页
  const pagination = {
    defaultPageSize: 5,
    defaultCurrent: 1,
    total: data.length,
    showQuickJumper: true,
    showSizeChanger: true,
    pageSizeOptions: [5, 10, 15, 20],
};
  

  return (
    <div className="order">
      <div className="title">
        <Breadcrumb separator=">">
          <Breadcrumb.Item>订单管理</Breadcrumb.Item>
          <Breadcrumb.Item href="">订单管理</Breadcrumb.Item>
        </Breadcrumb>
      </div>
      {/* 搜索 */}
      <div>
      <Form
        className="search"
        name="customized_form_controls"
        layout="inline"
        onFinish={onSearch}
      >
        <Form.Item name="userId">
          <Input placeholder="请输入关键字搜索" />
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{ background: "#69657e" }}
            htmlType="submit"
          >
            <SearchOutlined />
          </Button>
        </Form.Item>
        <Form.Item>
          <Button
            type="primary"
            style={{ background: "#69657e" }}
            onClick={showDrawer}
          >
            重置
          </Button>
        </Form.Item>
        <Form.Item>
            <Button type="link" style={{ color: "#52a6ff" }} onClick={senior}>
              高级筛选
              <DoubleLeftOutlined rotate={270} style={iStyle} />
            </Button>
          </Form.Item>
      </Form>
      </div>
      <div className="site-drawer-render-in-current-wrapper">
        <Drawer
          placement={placement}
          closable={false}
          onClose={onClose}
          open={open}
          key={placement}
          getContainer={false}
          bodyStyle={style}
          height={180}
        >
          <Form className="senior" layout="inline" onFinish={onSearch}>
            <Form.Item label="订单号" name="roleName">
              <Input placeholder="请输入订单号" />
            </Form.Item>
            <Form.Item label="订单项目" name="roleName">
                <Input placeholder="请输入订单项目" />
            </Form.Item>
            <Form.Item label="订单金额" name="roleName">
                <Input placeholder="请输入订单金额" />
            </Form.Item>
            <Form.Item label="提交人" name="roleName">
                <Input placeholder="请输入提交人" />
            </Form.Item>
            <Form.Item label="提交人手机号" name="roleName">
                <Input placeholder="请输入提交人手机号" />
            </Form.Item>
            <Form.Item label="订单状态" name="status">
              <Select style={{ width: 180 }} placeholder="成功">
                <Select.Option value="1">成功</Select.Option>
                <Select.Option value="2">失败</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="支付流水号" name="roleName">
                <Input placeholder="请输入支付流水号" />
            </Form.Item>
            <div
              className="seniorClose"
              onClick={() => {
                setOpen(false);
              }}
            >
              <CloseOutlined />
            </div>
            <div className="seniorBtn">
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  查询
                </Button>
              </Form.Item>
              <Form.Item>
                <Button
                  type="primary"
                  style={{ background: "#69657e" }}
                  htmlType="submit"
                >
                  重置
                </Button>
              </Form.Item>
            </div>
          </Form>
        </Drawer>
      </div>
      <Table
        className="table"
        rowSelection={{
          type: "radio",
          ...rowSelection,
        }}
        columns={columns}
        dataSource={data}
        bordered={true}
        pagination={pagination}
      />
      ;
    </div>
  );
};
export default Order;
